<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="ul1">
        <li>111</li>
        <li>222</li>
    </ul>

    <ul class="ul2">
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        // 点击li 1 和 2 的时候 所在的ul 变成蓝色  body 背景变成红色
        // 点击li  3 和 4 的时候 所在的ul变成 黄色  body背景变成 蓝色；

        // 获取所有的li
        var lis = document.querySelectorAll("li");
        // 给每一个li绑定点击事件
        lis.forEach(function(item,key){
            item.onclick = function(){
                // console.log("点击了li",this);
                // 通过this 来定位父级ul元素
                var ulEle = this.parentNode;
                // console.log(ulEle);
                console.log(key);
                if(key==0 || key==1){
                    ulEle.style.background = "blue";
                    ulEle.parentNode.style.background = "red";
                    // document.querySelector("body")
                    // document.body
                }else{
                    ulEle.style.background = "yellow";
                    ulEle.parentNode.style.background = "blue";
                }
                

            }
        })

    </script>
</body>
</html>